import type { FC, ReactNode } from 'react'
import React, { memo, useState } from 'react'
import { Card } from 'antd'

import { LoginWrapper } from '@/views/login/style'
import PasswordPannel from '@/views/login/c-cpns/password-pannel'
import PhonePannel from '@/views/login/c-cpns/phone-pannel'
import { Navigate } from 'react-router-dom'
import { localCache } from '@/utils/cache'
import { CacheType } from '@/global/constant'

interface IProps {
  children?: ReactNode
}

enum LoginType {
  Password = 'password',
  Phone = 'phone'
}

const typeList = [
  {
    key: LoginType.Password,
    tab: '密码登录'
  },
  {
    key: LoginType.Phone,
    tab: '手机号登录'
  }
]

const contentList: Record<string, ReactNode> = {
  [LoginType.Password]: <PasswordPannel />,
  [LoginType.Phone]: <PhonePannel />
}

const Login: FC<IProps> = (props) => {
  const token = localCache.getCache(CacheType.TOKEN)
  // 如果token存在，则说明用户已经登录，重定向到其他页面
  if (token && token.tokenValue) {
    return <Navigate to="/" replace />
  }

  const [activeType, setActiveType] = useState<string>(LoginType.Password)
  // 切换登陆面板
  const onTypeChange = (type: string) => {
    setActiveType(type)
  }

  return (
    <LoginWrapper>
      <div className="login">
        <Card
          headStyle={{
            textAlign: 'center',
            fontSize: '26px',
            fontFamily: '新宋体'
          }}
          style={{ width: '100%' }}
          title="欢迎登录-题海拾贝"
          tabList={typeList}
          activeTabKey={activeType}
          onTabChange={onTypeChange}
        >
          {contentList[activeType]}
        </Card>
      </div>
    </LoginWrapper>
  )
}

export default memo(Login)
